<template>
    <el-form :model="video" @submit.prevent="handleUpdate">
      <el-form-item label="视频 ID" :rules="rules.id">
        <el-input v-model="video.id" placeholder="请输入视频 ID" />
      </el-form-item>
      <el-form-item label="视频标题" :rules="rules.title">
        <el-input v-model="video.title" placeholder="请输入视频标题" />
      </el-form-item>
      <el-upload
        class="upload-demo"
        :action="updateUrl"
        :before-upload="beforeUpload"
        :on-change="handleFileChange"
        :show-file-list="false"
        accept=".mp4,.avi"
      >
        <el-button size="small" type="primary">选择新视频文件</el-button>
        <div slot="tip" class="el-upload__tip">可以上传新的 .mp4/.avi 格式的文件</div>
      </el-upload>
      <el-button type="primary" @click="submit">更新视频</el-button>
    </el-form>
  </template>
  
  <script>
  import { editVideo } from '@/api/video'; // 导入更新视频的 API
  
  export default {
    data() {
      return {
        video: {
          id: null,
          title: '',
          file: null // 用于存储文件对象
        },
        rules: {
          id: [{ required: true, message: '请输入视频 ID', trigger: 'blur' }],
          title: [{ required: true, message: '请输入视频标题', trigger: 'blur' }]
        },
        updateUrl: '/api/videos/update' // 更新视频的 API 地址
      };
    },
    methods: {
      beforeUpload(file) {
        const isVideo = file.type === 'video/mp4' || file.type === 'video/avi';
        if (!isVideo) {
          this.$message.error('上传视频格式不正确!');
        }
        return isVideo;
      },
      handleFileChange(file) {
        this.video.file = file.raw; // 保存文件对象
      },
      async handleUpdate() {
        if (!this.video.id) {
          this.$message.error('请填写视频 ID');
          return;
        }
  
        const formData = new FormData();
        formData.append('1id', this.video.id);
        formData.append('2title', this.video.title);
        if (this.video.file) {
          formData.append('3file', this.video.file);
        }
  
        try {
          const response = await editVideo(formData); // 调用更新视频的 API
          this.$message.success('视频更新成功！');
        } catch (error) {
          this.$message.error('视频更新失败！');
        }
      }
    }
  };
  </script>
  